<template>
  <div>
    <h1>App 根组件</h1>
    <div class="box">
      <!-- 子组件容器 -->
      <!-- <Left></Left>
      <Right></Right> -->
      <keep-alive include="Left,Right">
        <component :is="comName"></component>
      </keep-alive>
      <button @click="targetRight">切换Right组件</button>
      <button @click="targetLeft">切换Left组件</button>
    </div>
  </div>
</template>

<script>
import Left from "@/components/left.vue"
import Right from "@/components/right.vue"
export default {
  components:{
    Left,
    Right,
  },
  data(){
    return{
      comName: 'Left',
    }
  },
  methods:{
    targetRight(){
      this.comName = "Right"
    },
    targetLeft(){
      this.comName = "Left"
    }
  },
  created(){
    console.log('left组件被创建')
  },
  updated(){
    console.log('left组件被销毁')
  }
}
</script>

<style>

</style>
